<template>
    <div class="dataN">
        <h2>商品数量</h2>
        <div id="three"></div>
    </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
import * as echarts from 'echarts'
import http from '@/util/api';

type EChartsOption = echarts.EChartsOption;
var option: EChartsOption;


onMounted(() => {
    var chartDom = document.getElementById('three')!;
    var myChart = echarts.init(chartDom);
    http('/production').then(res => {
        let ydata = res.data.map(val => val.id)
        let xdata = res.data.map(val => val.goodsName)
        option = {
            xAxis: {
                data:xdata
            },
            yAxis: {},
            series: [
                {
                    type: 'candlestick',
                    data: ydata
                }
            ]
        };

        option && myChart.setOption(option);
    })

})




</script>

<style lang="scss" scoped>
h2 {
    /* 48像素 */
    height: 40px;
    color: black;
    line-height: 40px;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
}

#three {
    height: 400px;
}

.dataN {
    width: 100%;
    height: 100%;
    background-color: #fff;
}
</style>